<template>
  <view class="main">
    <!-- 赞赏支付页面 -->
    <view style="height: 2rpx; background-color: #eeeeee"></view>
    <view class="content">
      <view class="information">
        <view class="photo">
          <image :src="url" mode="aspectFill"></image>
        </view>
        <view class="right">
          <text class="name">{{ name }}</text>
          <text class="from">{{ company }}</text>
        </view>
      </view>
      <view class="money">
        <view
          v-for="(item, index) in moneys"
          :class="[isAdd === index ? 'active num' : 'num']"
          @tap="selectMoney(index)"
          >{{ item + "元" }}</view
        >
        <view class="m-bot">
          <view
            :class="[isAdd == '其他金额' ? 'other active' : 'other']"
            @tap="prompt"
            >{{ inpMoney == "其他金额" ? "其他金额" : inpMoney + "元" }}</view
          >
        </view>
      </view>
      <view class="Sentiment">
        <view @tap="prompt1" style="width: 600rpx; height: 80rpx">
          {{
            blessing.length > 0 && isBlessing == false
              ? blessing[blessingIndex].dictName
              : blessingWord
          }}
        </view>
        <view class="switch">
          <image
            :src="require('../../imges/switch.png')"
            mode="aspectFill"
          ></image>
          <text @tap="qiehuan">点击换一换祝福语</text>
        </view>
      </view>
      <view class="pay">
        <view class="vx-pay" @tap="weixinZhifu">微信支付</view>
      </view>
    </view>
    <!-- 金额输入弹窗 -->
    <prompt
      ref="prompt"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      title="请输入打赏金额"
    ></prompt>
    <!-- 输入祝福语弹窗 -->
    <prompt
      ref="prompt1"
      @onConfirm1="onConfirm1"
      @onCancel1="onCancel1"
      title="请输入祝福语"
    ></prompt>
    <view class="zhezhao" v-if="is_rate">
      <view class="content">
        <view class="top">
          <image src="../../imges/xufeiyes.png" mode="aspectFill"></image>
          <image
            src="../../imges/cha.png"
            mode="aspectFill"
            class="guanbi"
            @tap="closeRate"
          ></image>
        </view>
        <view class="tishi_"> 打赏成功 </view>
        <view class="title"> 您已成功打赏了“{{ name }}”！ </view>
        <view class="footer_btn" @tap="handleEnter"> 进入详情 </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import prompt from "../../components/payInput.vue";
var jweixin = require("jweixin-module");
export default {
  components: { prompt },
  data() {
    return {
      moneys: [1, 2, 5, 10, 20, 50],
      money: "",
      isAdd: "",
      inpMoney: "其他金额",
      blessing: [],
      blessingIndex: 0,
      payData: {},
      name: "",
      url: "",
      company: "",
      blessingWord: "",
      is_rate: false,
      isBlessing: false,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.name = options.name;
    this.url = options.url;
    this.company = options.company;
    let token = uni.getStorageSync("token");
    const that = this;
    request({
      url: "app/home/listBydictType?uid=",
      method: "POST",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
        token: token,
      },
      data: {
        dictType: "REWARD_BLESS",
      },
    }).then((res) => {
      if (res.data.code == 200) {
        that.blessing = res.data.data;
      } else if (res.data.code == 401) {
        uni.showToast({
          title: "登录失效，请重新授权登录！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        uni.showToast({
          title: res.data.msg,
          duration: 2000,
          icon: "none",
        });
      }
    });
  },
  updated() {
    // if (this.inpMoney != "其他金额") {
    //   this.money = this.inpMoney;
    // }
    // console.log(this.money);
  },
  methods: {
    qiehuan() {
      if (this.blessingWord) {
        this.isBlessing = false;
        this.blessingIndex = 0;
        this.blessingWord = "";
      } else {
        this.blessingIndex++;
      }
      if (this.blessingIndex == this.blessing.length) {
        this.blessingIndex = 0;
      }
      console.log(this.blessingIndex);
    },
    closeRate() {
      //关闭打赏成功弹窗
      this.is_rate = false;
    },
    handleEnter() {
      //点击进入详情
      uni.reLaunch({
        url: "/pages/index/trickDetail?id=" + this.id,
      });
    },
    //获取支付参数
    weixinZhifu() {
      console.log(this.money);
      if (this.money == "") {
        uni.showToast({
          icon: "none",
          title: "请输入支付金额",
          duration: 4000,
        });
      } else {
        let token = uni.getStorageSync("token");
        let zhufu = "";
        if (this.isBlessing) {
          zhufu = this.blessingWord;
        } else {
          zhufu = this.blessing[this.blessingIndex].dictName;
        }
        const that = this;
        // console.log(token, 'token')
        if (!token) {
          uni.showToast({
            title: "请授权登录再操作！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          request({
            url: "app/reward/pay?uid=",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              messageId: this.id,
              payWay: 4,
              money: this.money,
              token: token,
              blessWord: zhufu,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              that.payData = res.data.data.prepayDate;
              that.payRequest(res.data.data.prepayDate);
              console.log(that.payData, "-----------that.payData");
              console.log(that.payData, "11111-111");
            } else if (res.data.code == 401) {
              uni.showToast({
                title: "登录失效，请重新授权登录！",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/index/index",
                });
              }, 2000);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    // 调起支付
    payRequest(payData) {
      let that = this;
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          // 'Referer' : 'https://test.yiqilaiwang.com'
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
          });
          jweixin.ready(function () {
            jweixin.checkJsApi({
              jsApiList: ["chooseWXPay"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function (res) {
                console.log("成功");
                console.log(res);
              },
              fail: function (res) {
                console.log("res");
                console.log(res);
              },
            });
            jweixin.chooseWXPay({
              appId: payData.appId,
              timestamp: payData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位
              package: `prepay_id=${payData.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: payData.paySign, // 支付签名
              success: function (res) {
                // 支付成功后的回调函数
                uni.showToast({
                  icon: "none",
                  title: "支付成功",
                  duration: 2000,
                });
                setTimeout(function () {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1500);
                console.log("paysuccess");
                console.log(res);
                var route = "payResult" + "?type=1";
                uni.navigateTo({
                  url: route,
                });
              },
              cancel: function (r) {
                var route = "payResult" + "?type=2";
                uni.navigateTo({
                  url: route,
                });
              },
              fail: function (res) {
                console.log("payfail");
                console.log(res);
                var route = "payResult" + "?type=0";
                uni.navigateTo({
                  url: route,
                });
              },
            });
          });

          jweixin.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            /*alert("config信息验证失败");*/
          });
        } else if (res.data.code == 401) {
          uni.showToast({
            title: "登录失效，请重新授权登录！",
            duration: 2000,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/index/index",
            });
          }, 2000);
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 1500,
            icon: "none",
          });
        }
      });
    },
    handleTui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    selectMoney(index) {
      this.isAdd = index;
      // if (this.inpMoney == "其他金额") {
      this.money = this.moneys[index];
      // } else {
      //   this.money = this.inpMoney;
      // }
      // this.weixinZhifu();
      console.log(this.moneys[index]);
    },
    prompt() {
      this.isAdd = "其他金额";
      this.$refs.prompt.show();
    },
    prompt1() {
      this.$refs.prompt1.show();
    },
    onConfirm: function (e) {
      if (e == "") {
        this.inpMoney = "其他金额";
      } else if (e > 500000) {
        this.inpMoney = 500000;
        this.money = 500000;
        uni.showToast({
          title: "打赏金额最高为500000！",
          duration: 2000,
          icon: "none",
        });
      } else {
        this.inpMoney = e;
        this.money = e;
        // this.weixinZhifu();
      }

      this.$refs.prompt.hide();
    },
    onCancel: function () {
      this.$refs.prompt.hide();
    },
    onConfirm1: function (e) {
      // this.blessingWord = [];
      // this.blessing.push(e);
      // this.blessingIndex = 0;
      if (e == "") {
        this.blessingWord = "";
        this.isBlessing = false;
      } else {
        this.isBlessing = true;
        this.blessingWord = e;
      }
      this.$refs.prompt1.hide();
      console.log(e);
    },
    onCancel1: function (e) {
      console.log(e, "取消");
      // if(e == ''){
      // 	this.blessingWord = ''
      // 	this.isBlessing = false;
      // }else{
      // 	this.isBlessing = true;
      // 	this.blessingWord = e
      // }
      this.$refs.prompt1.hide();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 167rpx;
}
.zhezhao {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520rpx;
    height: 564rpx;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;

    .top {
      width: 520rpx;
      height: 260rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 70%;
        height: 70%;
      }

      .guanbi {
        width: 22rpx;
        height: 22rpx;
        position: absolute;
        top: 25rpx;
        right: 25rpx;
      }
    }

    .tishi_ {
      width: 100%;
      text-align: center;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
    }

    .title {
      width: 100%;
      box-sizing: border-box;
      padding: 0 38rpx;
      font-size: 29rpx;
      font-family: PingFang SC;
      font-weight: 550;
      color: #343434;
      line-height: 40rpx;
      margin-top: 20rpx;
      text-align: center;
    }

    .footer_btn {
      width: 328rpx;
      height: 86rpx;
      background: #2268eb;
      border-radius: 43rpx;
      margin: 25rpx auto;
      line-height: 86rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
  }
}
.content {
  .information {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 35rpx 0;
    .photo {
      width: 106rpx;
      height: 106rpx;
      border-radius: 50%;
      image {
        width: 106rpx;
        height: 106rpx;
        border-radius: 50%;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 25rpx;
      .name {
        font-size: 36rpx;
        font-family: PingFang-SC-Medium;
        font-weight: bold;
        color: #333333;
      }
      .from {
        font-size: 26rpx;
        font-family: PingFang-SC-Regular;
        color: #999999;
      }
    }
  }
  .money {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 34rpx;
    box-sizing: border-box;
    .num {
      width: 210rpx;
      height: 104rpx;
      border: 2rpx solid #2168eb;
      margin-top: 16rpx;
      box-sizing: border-box;
      text-align: center;
      line-height: 104rpx;
      font-size: 32rpx;
      font-family: PingFang-SC-Regular;
      color: #2168eb;
      border-radius: 8rpx;
    }
    .active {
      background-color: #e2ecff;
    }
    .m-bot {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 16rpx;
      .other {
        width: 210rpx;
        height: 104rpx;
        border: 2rpx solid #2168eb;
        box-sizing: border-box;
        text-align: center;
        line-height: 104rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Regular;
        color: #2168eb;
        border-radius: 8rpx;
      }
    }
  }
  .Sentiment {
    padding: 29rpx 25px 18rpx;
    margin: 44rpx 33rpx;
    border: 1px solid #999999;
    background-color: #f8f8fa;
    border-radius: 8rpx;
    text {
      font-size: 30rpx;
      font-family: PingFang-SC-Regular;
      line-height: 40rpx;
    }
    .switch {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10rpx;
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 9rpx;
      }
      text {
        font-size: 22rpx;
        font-family: PingFang-SC-Regular;
        color: #2168eb;
      }
    }
  }
  .pay {
    width: 100%;
    margin-top: 83rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    view {
      width: 340rpx;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-family: PingFang-SC-Regular;
      text-align: center;
      line-height: 88rpx;
      margin-bottom: 30rpx;
      color: #ffffff;
    }
    .vx-pay {
      background-color: #22b555;
    }
    .zfb-pay {
      background-color: #217beb;
    }
  }
}
.popup-layer {
  width: 400rpx;
  height: 200rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 26rpx;
  }
}
</style>
